import React, { Component } from "react";
import Header from './components/Header'
import Footer from "./components/Footer";
import List from "./components/List";
import './App.css';

export default class App extends Component{
  // 状态在哪里，操作就在哪里

  state = {
    todos: [
      {id: '001', name: "吃饭",  done: true},
      {id: '002', name: "睡觉",  done: true},
      {id: '003', name: "敲代码",  done: false},
    ],
  }

  addTodo=(todo)=>{
    const {todos} = this.state
    const newTodos = [todo, ...todos]
    this.setState({todos: newTodos})
  }

  // 更新todos
  updateTodo=(id, done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todo)=>{
      if(todo.id === id) return {...todo, done}
      return todo
    })
    this.setState({todos: newTodos})
  }


  // 删除todo
  deleteTodo = (id) =>{
    const {todos} = this.state
    const newTodos = todos.filter((todo)=>{
      return todo.id !== id
    })
    this.setState({todos: newTodos})
  }

  // 
  checkAllTodo = (done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoObj)=>{
      return {...todoObj, done}
    })
    this.setState({todos: newTodos})
  }

  handleClearAllDone = ()=>{
    const {todos} = this.state
    const newTodos = todos.filter((todo)=>{
      return !todo.done
    })
    this.setState({todos: newTodos})
  }


  render(){
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header  addTodo={this.addTodo}/>
          <List 
          todos={todos} 
          updateTodo={this.updateTodo}
          deleteTodo={this.deleteTodo}
          />
          <Footer 
          todos={todos}
          checkAllTodo={this.checkAllTodo}
          handleClearAllDone={this.handleClearAllDone}
          />
        </div>
      </div>

    )
  }
}

